<template lang="pug">
    el-form(@submit.navite.prevent :inline="true")
        template(v-for="item in fields_copy")
            el-form-item(:key="item.label")
                template(v-if="item.type== 'Selection'")
                    SelectionField(:field="item", v-model="item.val")
                template(v-else)
                    el-input(v-model="item.val" :placeholder="item.label" clearable)
        <!--查询按钮-->
        template(v-if="fields_copy && fields_copy.length")
            el-form-item
                el-button(type="primary" @click="do_search")
                    i(class="el-icon-search")
                    span 查询
</template>
<script>
import { mapActions } from "vuex";
import SelectionField from "./components/selection-field";

export default {
  name: "search-bar",

  components: { SelectionField },

  data() {
    return {
      fields_copy: []
    };
  },
  props: {
    fields: { type: Array }
  },

  watch: {
    fields() {
      this.on_field_change();
    }
  },

  methods: {
    ...mapActions(["setFilter"]),

    on_field_change() {
      this.fields_copy = JSON.parse(JSON.stringify(this.fields));
    },

    do_search() {
      this.$store.dispatch("data/setFilter", this.fields_copy);
      this.$emit("search-click");
    }
  },

  created() {
    this.on_field_change();
  }
};
</script>
